<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Ring and Balls</title>
</head>
<body>
<canvas id="physics-diagram" width="600" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // --- Drawing Parameters ---
    const cx = 250;
    const cy = 250;
    const innerR = 150;
    const ringThickness = 12;
    const outerR = innerR + ringThickness;

    // --- Global Styles ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = "italic 24px 'Times New Roman'";

    // --- Helper function for drawing arrowheads ---
    function drawArrowhead(ctx, x, y, angle, length = 12, width = 10) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-length, width / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-length, -width / 2);
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.restore();
    }

    // 1. Draw the Ring
    ctx.beginPath();
    ctx.arc(cx, cy, innerR, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(cx, cy, outerR, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw Center 'O' and Dashed Line
    ctx.beginPath();
    ctx.arc(cx, cy, 3.5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('O', cx - 28, cy + 12);

    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + outerR, cy);
    ctx.lineWidth = 1.5;
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line
    ctx.lineWidth = 2;

    // 3. Draw the Ball Assemblies
    const ballYOffset = 18;
    const fixtureWidth = 10;
    const fixtureHeight = 9;

    // Top Assembly
    ctx.fillRect(cx + innerR - fixtureWidth, cy - ballYOffset - fixtureHeight / 2, fixtureWidth, fixtureHeight);
    ctx.beginPath();
    ctx.arc(cx + innerR, cy - ballYOffset, 4, 0, 2 * Math.PI);
    ctx.fill();

    // Bottom Assembly
    ctx.fillRect(cx + innerR - fixtureWidth, cy + ballYOffset - fixtureHeight / 2, fixtureWidth, fixtureHeight);
    ctx.beginPath();
    ctx.arc(cx + innerR, cy + ballYOffset, 4, 0, 2 * Math.PI);
    ctx.fill();

    // Labels for mass 'm'
    ctx.fillText('m', cx + innerR + 15, cy - ballYOffset - 5);
    ctx.fillText('m', cx + innerR + 15, cy + ballYOffset + 22);

    // 4. Draw Force F and Point P
    const forceStartX = cx + outerR;
    const forceStartY = cy;
    const forceEndX = forceStartX + 120;
    const forceEndY = cy;

    // Small circle at the origin of the force
    ctx.beginPath();
    ctx.arc(forceStartX, forceStartY, 3.5, 0, 2 * Math.PI);
    ctx.fill();

    // Force arrow line
    ctx.beginPath();
    ctx.moveTo(forceStartX, forceStartY);
    ctx.lineTo(forceEndX, forceEndY);
    ctx.stroke();

    // Force arrowhead
    const forceAngle = Math.atan2(forceEndY - forceStartY, forceEndX - forceStartX);
    drawArrowhead(ctx, forceEndX, forceEndY, forceAngle, 15, 12);

    // Labels 'P' and 'F'
    ctx.fillText('P', forceStartX + 8, cy + 8);
    ctx.fillText('F', forceEndX + 10, cy + 8);

    // 5. Draw Radius R
    const angleR = 135 * Math.PI / 180; // Angle for the radius line
    const lineEndX = cx + innerR * Math.cos(angleR);
    const lineEndY = cy + innerR * Math.sin(angleR);

    // Radius line
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(lineEndX, lineEndY);
    ctx.stroke();

    // Radius arrowhead, pointing to the circumference
    const radiusTipX = cx + (innerR - 2) * Math.cos(angleR);
    const radiusTipY = cy + (innerR - 2) * Math.sin(angleR);
    drawArrowhead(ctx, radiusTipX, radiusTipY, angleR);

    // Label R
    ctx.fillText('R', cx + (innerR / 2) * Math.cos(angleR) - 30, cy + (innerR / 2) * Math.sin(angleR) - 20);

    // 6. Draw Mass M
    ctx.fillText('M', cx - innerR * 0.7, cy + innerR * 0.5);

</script>
</body>
</html>